<style scoped>
  .report-wrap{
    background: white;
    position: relative;
    height: 100vh;
    overflow-y: scroll;
    padding-bottom: 0;
  }
  .report-desc{
    padding: 2vw;
    color: #aaa;
    border-bottom: #eeeeee 1px solid;
  }
  .report-item {
    margin: 2vw;
    padding-bottom: 1.5vh;
    padding-top: 0.5vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: #eeeeee 1px solid;
  }

  .report-bottom{
    padding: 2vw;
    color: royalblue;
    border-top: #eeeeee 1px solid;
  }
  .submit-wrap .report-item{
    margin: 2vw 0;
    padding-left: 2vw;
    padding-right: 2vw;
  }
  .report-notice{
    position: absolute;
    width: 100vw;
    text-align: center;
    bottom: 0;
  }
</style>
<template>
  <div class="report-wrap">
    <div class="item-wrap" v-if="showIndex===0">
      <div class="report-desc">请选择投诉该网页的原因:</div>
      <div class="report-item" @click="showIndexOne('网页包含欺诈信息(如:假红包)')">
        <span class="item-content">网页包含欺诈信息(如:假红包)</span>
        <van-icon name="arrow" color="#CBCBD0"/>
      </div>
      <div class="report-item" @click="showIndexOne('网页包含色情信息')">
        <span class="item-content">网页包含色情信息</span>
        <van-icon name="arrow" color="#CBCBD0"/>
      </div>
      <div class="report-item" @click="showIndexOne('网页包含暴力恐怖信息')">
        <span class="item-content">网页包含暴力恐怖信息</span>
        <van-icon name="arrow" color="#CBCBD0"/>
      </div>
      <div class="report-item" @click="showIndexOne('网页包含政治敏感信息')">
        <span class="item-content">网页包含政治敏感信息</span>
        <van-icon name="arrow" color="#CBCBD0"/>
      </div>
      <div class="report-item" @click="showIndexOne('网页收集个人隐私信息(如:钓鱼链接)')">
        <span class="item-content">网页收集个人隐私信息(如:钓鱼链接)</span>
        <van-icon name="arrow" color="#CBCBD0"/>
      </div>
      <div class="report-item" @click="showIndexOne('网页包含诱导分享/关注性质内容',1)">
        <span class="item-content">网页包含诱导分享/关注性质内容</span>
        <van-icon name="arrow" color="#CBCBD0"/>
      </div>
      <div class="report-item" style="border-bottom:none;padding-bottom: 0;" @click="showIndexOne('网页可能包含谣言信息',2)">
        <span class="item-content">网页可能包含谣言信息</span>
        <van-icon name="arrow" color="#CBCBD0"/>
      </div>
      <div class="report-bottom"><a href="https://mp.weixin.qq.com/s/TbX1CcZhQNReneXVc3At9Q">遇到网页流量被劫持怎么办</a></div>
    </div>
    <div class="submit-wrap" v-if="showIndex===1">
      <div class="report-desc">你可以:</div>
      <div class="report-item" @click="showIndexTwo">
        <span class="item-content">提交给微信团队审核</span>
        <van-icon name="arrow" color="#CBCBD0"/>
      </div>
      <div class="report-bottom"  style="border-top: none" v-if="showShare"><a href="https://mp.weixin.qq.com/s/LJkN77dgg2A9C8GepUGdeA">了解什么是诱导分享类内容</a></div>
      <div class="report-bottom" style="border-top: none" v-if="yaoyan"><a href="https://mp.weixin.qq.com/s/w2VEz97HTsYTNALskHlSIQ">了解微信对谣言的治理</a></div>
    </div>
    <div v-if="showIndex===2" class="success-wrap" style="padding: 2vw">
      <div style="text-align: center;padding-top: 4vh;padding-bottom: 2vh">
        <van-icon name="checked" color="#3FB838" size="30vw"/>
      </div>
      <div style="text-align: center;font-size: 4.5vw;color: #333">
        投诉已提交
      </div>
      <div style="text-align: center;font-size: 3.5vw;color: #646464;margin-top: 2vh;margin-bottom: 3vh">
        微信团队会尽快核实,并通过"微信团队"通知你审核结果,感谢你的支持.
      </div>
      <div style="background-color: #04BE02;font-size: 4.5vw;color: white;
text-align: center;border-radius: 2vw;padding: 2vw">
        <a style="color: white" href="javascript:WeixinJSBridge.call('closeWindow');">关闭</a></div>
    </div>

    <div class="report-notice" v-if="showIndex===0||showIndex===1">
      <router-link :to="{ name: 'report-notice'}">投诉须知</router-link>
    </div>
  </div>
</template>
<script>
	import {add} from '@/api/report'
	import {getActiveId} from '@/libs/util'
  export default {
    name:'report',
    data(){
      return{
        showIndex:0,
        showShare:false,
        yaoyan:false,
	      content:null,
      }
    },
	  methods:{
      toAdd(){
        let mainData = this.GLOBAL.getMainData();
        add({aid:mainData.id,report_content:this.content,active_title:mainData.title}).then(rep=>{
         });
      },
		  showIndexOne(content,type){
        this.showIndex = 1;
        this.content = content;
        if(type===1){
          this.showShare = true;
        }else if(type===2){
          this.yaoyan = true;
        }
		  },
      showIndexTwo(){
        this.showIndex=2;
        this.toAdd();
      }
	  }
  }
</script>
